<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加管理员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/layui/layui.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-anim layui-anim-up">
<div class="x-body" style="margin-left: 50px">

    <form class="layui-form" id="registerForm"  onsubmit="return false">
        <div class="layui-form-item">
            <label for="userName" class="layui-form-label">
                用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userName" name="userName" required="" maxlength="8" lay-verify="userName"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="userPassword" class="layui-form-label">
                密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="userPassword" name="userPassword" maxlength="12" required=""
                       lay-verify="password"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="userPassword2" class="layui-form-label">
                确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="userPassword2" name="userPassword2" maxlength="12" required=""
                       lay-verify="password2"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="userPhone" class="layui-form-label">
                手机号码
            </label>
            <div class="layui-input-inline">
                <input type="text" id="userPhone" name="userPhone" maxlength="11" required="" lay-verify="phone"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                验证码
            </label>
            <div class="layui-input-inline">
                <input name="verifyCode" lay-verify="required" maxlength="4" placeholder="请输入验证码" type="text"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn feachBtn layui-btn-normal" id="verifyBtn">点击获取验证码</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="userPhone" class="layui-form-label">
                管理员角色
            </label>
            <div id="roles">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit="">注册</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
<script>

    $(function () {
        $('#verifyBtn').click(function () {
            if (!/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test($("input[name=userPhone]").val())) {
                layer.msg("手机号码格式不正确！~");
                return;
            }
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/admin/add/sendVerifyCode",
                data: {userPhone: $("input[name=userPhone]").val()},
                dataType: "json",
                success: function (json) {
                    layer.msg(json.msg);
                    if (json.code === 200) {
                        let count = 60;
                        const countDown = setInterval(() => {
                            if (count === 0) {
                                $('#verifyBtn').text('重新发送').removeAttr('disabled');
                                $('#verifyBtn').css({
                                    background: '#1E9FFF',
                                    color: '#fff',
                                });
                                clearInterval(countDown);
                            } else {
                                $('#verifyBtn').attr('disabled', true);
                                $('#verifyBtn').css({
                                    background: '#d8d8d8',
                                    color: '#707070',
                                });
                                $('#verifyBtn').text(count + 's后重新获取');
                            }
                            count--;
                        }, 1000);
                    }
                }
            });

        });
    });

    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        form.verify({
            userName: [/[\u4e00-\u9fa5_a-zA-Z0-9_]{2,8}/, "用户名必须2-8位字符"],
            password: [/(.+){6,12}$/, '密码必须6到12位']
            , password2: function () {
                if ($('#userPassword').val() != $('#userPassword2').val()) {
                    return '两次密码不一致';
                }
            }
        });

        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/role/findRole",
            dataType: "json",
            success: function (data) {
                if (data.code === 200){
                    $('#roles').empty();
                    $(data.data).each(function () {
                        $('#roles').append('<input type="checkbox" id="role'+this.roleId+'" name="role'+this.roleId+'" value="'+this.roleId+'" title="'+this.roleName+'">')
                    });
                    // 重新渲染
                    form.render('checkbox');
                }
            }
        });


        //监听提交
        form.on('submit(add)', function (data) {
            // 提交数据到后台
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/admin/add/checkVerifyCode",
                data: data.field,
                dataType: "json",
                success: function (json) {
                    if (json.code === 200) {
                        $.ajax({
                            type: "post",
                            url: "${pageContext.request.contextPath}/admin/add/do",
                            data: data.field,
                            dataType: "json",
                            success: function (data) {
                                layer.msg(data.msg, function () {
                                    if (data.code === 200) {
                                        window.parent.location.reload();
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                    }
                                });
                            }
                        });
                    } else {
                        layer.msg(json.msg);
                    }
                }
            });
            return false;
        });

    });


</script>

</body>

</html>